<template>
  <div class="lb-system-other">
    <top-nav />
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="140px"
      >
        <el-form-item label="最低提现额度" prop="cash_mini">
          <el-input
            v-model="subForm.cash_mini"
            placeholder="请输入最低提现额度"
          ></el-input>
          <lb-tool-tips>技师提现服务订单佣金的最低提现额度</lb-tool-tips>
        </el-form-item>
        <el-form-item label="平台联系电话" prop="mobile">
          <el-input
            v-model="subForm.mobile"
            placeholder="请输入平台联系电话"
          ></el-input>
          <lb-tool-tips
            >平台联系电话用于客户咨询，请填写有效的联系电话</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="语音播报音频" prop="countdown_voice">
          <div class="upload-file-warp">
            <input
              type="text"
              class="choice-file-input"
              v-model="subForm.countdown_voice"
              placeholder="请选择语音播报音频"
            />
            <lb-cover
              type="button"
              fileType="audio"
              :fileSize="1"
              @selectedFiles="getVoice"
            ></lb-cover>
          </div>
          <lb-tool-tips>
            <div>
              当技师点击开始服务，若订单服务总时长大于5分钟，则距离服务结束5分钟时，自动播放此音频文件
            </div>
            <div class="mt-md">
              1）此音频仅在技师端的订单列表页（仅在点击【开始服务】且未退出列表页面时有效）、订单详情页播放
            </div>
            <div class="mt-md">
              2）如有多个订单点击开始服务，则按照时间先后依次播报，当第二个订单到达播报时间时，若第一个订单尚未播报完毕则暂停并重新播报
            </div>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="客服类型" prop="im_type">
          <el-radio-group v-model="subForm.im_type">
            <el-radio :label="1">平台电话</el-radio>
            <el-radio :label="2">小程序客服</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >勾选平台电话，用户可直接拨打平台的电话号码
            <p class="mt-sm">
              勾选小程序客服会直接对接小程序客服，需要在腾讯小程序官方后台添加客服后，可连接对话；
            </p>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="匿名评价" prop="anonymous_evaluate">
          <el-radio-group v-model="subForm.anonymous_evaluate">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启之后，手机用户端的评价不显示真实头像和真实昵称
          </lb-tool-tips>
        </el-form-item>

        <el-form-item>
          <lb-button @click="submitForm" type="primary">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      subForm: {
        cash_mini: '',
        mobile: '',
        countdown_voice: '',
        im_type: 1,
        anonymous_evaluate: 0
      },
      subFormRules: {
        cash_mini: { required: true, validator: this.$reg.isMoney, trigger: 'blur' },
        mobile: { required: true, validator: this.$reg.isAllPhone, trigger: 'blur' },
        countdown_voice: { required: true, type: 'string', message: '请选择语音播报音频', trigger: 'blur' },
        im_type: { required: true, type: 'number', message: '请选择客服类型', trigger: 'blur' },
        anonymous_evaluate: { required: true, type: 'number', message: '请选择匿名评价', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    async getFormInfo () {
      let { code, data } = await this.$api.system.configInfo()
      if (code !== 200) return
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    /**
       * @method 获取语音文件
       */
    getVoice (file) {
      let len = file.length - 1
      this.subForm.countdown_voice = file[len].url
    },
    submitForm () {
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          let { subForm } = this
          this.$api.system.configUpdate(subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-system-other {
  width: 100%;

  .el-input,
  .el-select {
    width: 300px;
  }
}
</style>
